<template>
  <!-- 异常品通知单表单弹窗 -->
  <div>
    <el-dialog
      v-model="visible"
      :title="title"
      width="1200px"
      draggable
      @close="closeDialog"
    >
      <el-form ref="formRef" :model="formData" :inline="true" :rules="rules">
        <h4 class="mb-[20px] mt-[0px]">基本数据</h4>
        <div>
          <el-descriptions
            class="margin-top"
            title=""
            :column="3"
            size="large"
            border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">异常通知单号</div>
              </template>
              {{ formData.noticeCode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">责任部门</div>
              </template>
              {{ formData.liableDepartmentName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">状态</div>
              </template>
              {{ useDictionary("reworkStatus", formData.status) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">设备</div>
              </template>
              {{ formData.equipName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">产品型号</div>
              </template>
              {{ formData.productCode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">产品名称</div>
              </template>
              {{ formData.productName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">批次号</div>
              </template>
              {{ formData.batchNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">异常数量</div>
              </template>
              {{ formData.abnormalNum }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">比例%</div>
              </template>
              {{ formData.ratio }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <h4 class="mb-[20px] mt-[20px]">详细数据</h4>
        <div class="formTable2">
          <el-table
            :data="formData.details"
            style="width: 100%"
            :key="Math.random"
            border
          >
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="100"
            />
            <el-table-column label="问题描述" props="describes" min-width="150">
              <template #default="{ $index, row }">
                {{ row.describes }}
              </template>
            </el-table-column>
            <el-table-column label="问题要求" props="demand" min-width="150">
              <template #default="{ $index, row }">
                {{ row.demand }}
              </template>
            </el-table-column>
            <el-table-column label="问题实际" props="actual" min-width="150">
              <template #default="{ $index, row }">
                {{ row.actual }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <h4 class="mb-[20px] mt-[20px]">意见</h4>
        <el-row>
          <el-col :span="24">
            <el-form-item label="" prop="viewContent" style="width: 99%">
              <el-input
                type="textarea"
                style="width: 100%"
                v-model="formData.viewContent"
                placeholder="请输入意见"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="判定人"
              prop="viewUserName"
              label-position="left"
            >
              <el-input
                v-model="formData.viewUserName"
                :disabled="true"
                placeholder="判定人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="判定日期"
              prop="viewTime"
              label-position="left"
            >
              <el-input
                v-model="formData.viewTime"
                :disabled="true"
                placeholder="判定日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="" prop="viewStatus" label-position="right">
              <el-select
                v-model="formData.viewStatus"
                placeholder="请选择状态"
                clearable
              >
                <el-option
                  v-for="item in useDictionary('reworkStatus').filter((item) =>
                    ['3', '4', '5', '6'].includes(item.value)
                  )"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="handleSubmit"
            >确 定</el-button
          >
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary";
import useEvent from "@/utils/useEvent";
import { useDictionary } from "../../../../../utils/useTable"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "QMSQUALITYJUDGMENT",
  inheritAttrs: false,
});

const { eventBusEmit, eventBusOn } = useEvent();
const emit = defineEmits(["reset-table", "change-visible"]);

const visible = ref(false);
const title = ref("异常通知单判定");
const data = reactive({});

/** formData定义表单数据 */
const formRef = ref(ElForm);
let formData = reactive({
  id: "",
  version: "",
  status: "",
  workStatus: "",
  noticeCode: "",
  noticeDate: "",
  noticeDepartmentCode: "",
  noticeDepartmentName: "",
  noticeDepartmentId: "",
  noticeUserId: "",
  noticeUserName: "",
  liableDepartmentId: "",
  liableDepartmentName: "",
  viewContent: "",
  viewUserName: "",
  viewTime: "",
  viewStatus: "",
  equipId: "",
  equipCode: "",
  equipName: "",
  productId: "",
  productCode: "",
  productName: "",
  materialNo: "",
  batchNo: "",
  abnormalNum: "",
  judgeUserName: "",
  judgeUserId: "",
  judgeTime: "",
  ratio: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: "",
  deleted: "",
  details: [
    {
      id: "",
      version: "",
      noticeDocId: "",
      describes: "",
      demand: "",
      actual: "",
      remarks: "",
      createTime: "",
      createdUserId: "",
      createdUserName: "",
      lastUpdateTime: "",
      lastUpdatedUserId: "",
      lastUpdatedUserName: "",
      enabled: "",
      deleted: "",
    },
  ],
});

/** rules规则 */
const rules = reactive({
  status: [],
  workStatus: [],
  noticeCode: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  noticeDate: [],
  noticeDepartmentCode: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  noticeDepartmentName: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  noticeUserName: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  liableDepartmentName: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  equipCode: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  equipName: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  productId: [
    { required: true, message: "请选择产品", trigger: "blur" },
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  viewStatus: [{ required: true, message: "请选择状态", trigger: "blur" }],
  productCode: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  productName: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  materialNo: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  batchNo: [
    { required: true, message: "请输入批次号", trigger: "blur" },
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  abnormalNum: [{ required: true, message: "请输入比例", trigger: "blur" }],
  judgeUserName: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  judgeTime: [],
  ratio: [{ required: true, message: "请输入异常数量", trigger: "blur" }],
  remarks: [
    { min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur" },
  ],
  createTime: [],
  createdUserName: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  lastUpdateTime: [],
  lastUpdatedUserName: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  enabled: [],
  sondescribes: [
    { required: true, message: "请填写问题描述", trigger: "blur" },
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  sondemand: [
    { required: true, message: "请填写问题要求", trigger: "blur" },
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  sonactual: [
    { required: true, message: "请填写问题实际", trigger: "blur" },
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
});

const isValidated = ref(false);
/** 删除行 */
const handleDelete = (index: any) => {
  formData.details.splice(index, 1);
  isValidated.value && formRef.value.validate(() => {});
};

const details = {
  id: "",
  version: "",
  noticeDocId: "",
  describes: "",
  demand: "",
  actual: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: "",
  deleted: "",
};

/** 关闭表单弹窗 */
function closeDialog() {
  visible.value = false;
  emit("change-visible", false);
  resetForm();
}
/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.details = [JSON.parse(JSON.stringify(details))];
  formData.id = "";
  formData.version = "";
  formData.status = "";
  formData.workStatus = "";
  formData.noticeCode = "";
  formData.noticeDate = "";
  formData.noticeDepartmentCode = "";
  formData.noticeDepartmentName = "";
  formData.noticeDepartmentId = "";
  formData.noticeUserId = "";
  formData.noticeUserName = "";
  formData.liableDepartmentId = "";
  formData.liableDepartmentName = "";
  formData.viewContent = "";
  formData.viewUserName = "";
  formData.viewTime = "";
  formData.viewStatus = "";
  formData.equipId = "";
  formData.equipCode = "";
  formData.equipName = "";
  formData.productId = "";
  formData.productCode = "";
  formData.productName = "";
  formData.materialNo = "";
  formData.batchNo = "";
  formData.abnormalNum = "";
  formData.judgeUserName = "";
  formData.judgeUserId = "";
  formData.judgeTime = "";
  formData.ratio = "";
  formData.remarks = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.enabled = "";
  formData.deleted = "";
}

const loading = ref(false);

/** 异常品通知单保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = "判定";
      const { id, viewStatus, viewContent } = formData;
      await request({
        url: "/qms/roknoticeviewdetail/qualityJudgment",
        method: "post",
        data: { noticeId: id, viewStatus, viewContent },
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      eventBusEmit("RESET-REWORK-ABMORMAL-QUALITY-TABLE", formData.id);
      isValidated.value = false;
    } else {
      isValidated.value = true;
    }
  });
}

async function getdetails() {
  let sondetails = await request({
    url: "/qms/roknoticedoc/getDetails",
    method: "post",
    data: formData,
  }).finally(() => {
    loading.value = false;
  });
  formData.details = sondetails.data;
}

let openEvent;
onBeforeUnmount(() => {
  openEvent();
});
onMounted(() => {
  openEvent = eventBusOn("OPEN-DOC-QUALITY-JUDGMENT", (row) => {
    Object.assign(formData, row);
    getdetails();
    visible.value = true;
  });
});
</script>

<style lang="scss" scoped>
h4 {
  font-weight: 400;
  color: #000;
  padding-left: 10px;
  font-size: 14px;
  line-height: 14px;
}

// .formTable {
//   :deep(.el-form-item) {
//     margin-right: 0 !important;
//   }
// }

:deep(.el-dialog .el-dialog__body) {
  overflow-y: auto;
  height: 65vh;
}

:deep.el-input.el-input--default.el-input--suffix {
  // 固定宽度
  width: 190px !important;
}
</style>
